<template>
  <div class="collectedSongList-container">
    <div class="collectedSongList-header">
      <span>收藏的歌单<span>（30）</span></span>
    </div>
    <div class="collectedSongList-split"></div>
    <div class="collectedSongList-list">
      <div
        class="collectedSongList-item"
        v-for="cl in collectedSongList"
        :key="cl.id"
      >
        <div class="collectedSongList-img">
          <router-link :to="{ path: '/songList', query: { id: cl.id } }">
            <img v-lazy="cl.coverImgUrl" alt=""
          /></router-link>
        </div>
        <div class="collectedSongList-info">
          <p class="collectedSongList-title">{{ cl.name }}</p>
          <p class="artist">{{ cl.creator.nickname }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "collectedSongList",
};
</script>

<script lang="ts" setup>
import { getSongListApi } from "@/api/myMusic/mySinger";
import { ref, onMounted } from "vue";

const collectedSongList = ref<any>([]);
const uid = 82877283;
const getSongList = async () => {
  const res = await getSongListApi(uid);
  collectedSongList.value = res.playlist.filter((item) => item.userId !== uid);
};

onMounted(() => {
  getSongList();
});
</script>

<style scoped>
.collectedSongList-container {
  width: 750px;
  border: 1px solid #d3d3d3;
}
.collectedSongList-header {
  font-size: 24px;
  padding: 10px;
}
.collectedSongList-split {
  width: 100%;
  height: 1px;
  background: #000;
  margin: 5px 0;
}
.collectedSongList-item {
  padding: 15px;
}
.collectedSongList-item img {
  width: 140px;
  height: 140px;
  margin-right: 10px;
}

.collectedSongList-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.collectedSongList-info p {
  width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
